/* 1. 引入 useCallback */
import React, { useCallback,useState,memo} from "react";

// 函数式组件中一个高阶组件，高性能组件，更新的时候做一个浅比较
const Demo = ()=>{
  console.log("Demo 组件更新了");
  return <h1>Demo 组件</h1>
}
const MemoDemo = memo(Demo);
/* 
  useCallback 使用，记忆函数
*/
const App = () => {
  let [num,setNum] = useState(3);
  let [str,setStr] = useState("a");
  // 2. num 翻倍
  // let doubleNum = useCallback(()=>{
  //   return num*2;
  // },[num])
  let doubleNum = useCallback(()=>{
    return num*2;
  },[str])
  // let doubleNum = ()=>{
  //   return num*2;
  // }
  return <div>
    {/* 1. 使用 doubleNum 函数 */}
    <h1>{doubleNum()}</h1>
    {/* <Demo></Demo> */}
    <MemoDemo doubleNum={doubleNum}></MemoDemo>
    <button onClick={()=>{
      setNum(c=>c+1);
    }}>num+1</button>
  </div>;
};

export default App;
